<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./node_modules/vue/dist/vue.js" ></script>

</head>
<body>
    <div id="app_div"></div>

        <script>


          // 公共组件
          Vue.component('my_btn',{
            template:`
                <span type="text"    v-text="'测试公共组件'"  style="background-color: orange" >  </span>
              `
          })

            var my_head = {
              template : '<div >我是头部{{title}}  常量数据 {{define}}</div> ',
              props : ['title',"define"]
            }

              //语法糖格式
            var my_body = Vue.extend({
              template : "<div>我是中间</div>"
            })

            var my_folter = {
              template : `<div >
                          单向数据绑定  <br />

                        <input type="text" :value="text" /> <br />
                          双向数据绑定 v-model <br />
                        <input type="text" v-model="text" /> <br />

                        <span  @click="my_fun(123)"> 我是底部 </span>

                    </div>`,
              methods : {
                my_fun : function (num) {
                            alert(num)
                }
              },
              data :function () {
                return {
                  text : 'hello world'
                }
              }
            }

            Vue.filter("comm_funt",function (str ,data) {
                        return data +":"+ str.split('').reverse().join('')

            })



          // /数据过滤  简称使用自定义函数
            var my_funt_template = {
                template :  `
                    <div >
                              // /数据过滤  简称使用自定义函数

                    <hr>
                        <input type="text" v-model="myFunctText">
                         <hr>
                          局部过滤：
                             {{myFunctText | reverse('传参')}}

                        <hr>
                        全局过滤：
                        {{myFunctText | comm_funt('全局过滤')}}
                    </div>
                `,
              data : function () {
                return {myFunctText:""}
              },
              filters : {
                  reverse : function (str,data) {
                        return data +":"+ str.split('').reverse().join('')
                  } ,
                  reverses : function (str,data) {
                        return data +":"+ str.split('').reverse().join('')
                  }
              }
            }

            //数据监控
            var my_watch_components ={
                    template : `
                     <div>
                        <input type="text" v-model="myText_watch" />
                        {{myText_watch}}
                        <button @click="stus[0].name ='json' " > 数据监控数组</button>
                        {{stus[0].name }}
                        <hr>
                        多数据监视
                       <input type="text" v-model="n1">
                       +
                      <input type="text" v-model="n2">
                        *
                       <input type="text" v-model="n3">
                            = {{my_data}}
                    </div>
                    `,
              data : function () {
                      return {
                        myText_watch:' ',
                        stus : [{name : "php"}],
                        n1 : 0,
                        n2 : 0,
                        n3 : 1
                      }
              },
              watch : {
                myText_watch : function  ( newVal , oldVal) {
                    console.log(newVal , oldVal)
                },
                stus : {
                  deep : true,
                  handler : function (newVal , oldVal) {
                        console.log(newVal , oldVal)
                  }
                }
              },
              computed : {
                my_data:function  () {

                  return ((this.n1-0)  + (this.n2-0) ) * this.n3;
                }
              }

            }

            var App_template  = {
              components : {
                'my_head' : my_head,
                'my_body' : my_body,
                'my_folter' : my_folter,
                'my_funt_template' : my_funt_template,
                'my_watch_components' : my_watch_components
              },
              template: `
                <div>
                        <my_head :title="title"  define="父传子常量数据测试" />
                        <my_body />
                        <my_folter />
                        <my_btn />
                        <my_funt_template />
                        <my_watch_components />

                </div>

              `,
              data : function () {
                return {
                  title : "父传子变量数据测试"
                }
              }
            }
            new Vue({
                el : "#app_div",
                components : {
                    app_components : App_template
                },
                template : "<app_components/>"
            })
        </script>



</body>
</html>
